<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>调整元素透明度</title>
    <style type="text/css">
        .light{
            width: 200px;
            height: 20px;
            background-color: blue;
            opacity: 0;
        }
        .medium{
            width: 200px;
            height: 20px;
            background-color: blue;
            opacity: 0.5;
        }
        .heavy{
            width: 200px;
            height: 20px;
            background-color: blue;
            opacity: 1;
        }
        .father{
            width: 400px;
            height: 20px;
            background-color: blue;
            opacity: inherit;
        }
    </style>
</head>
<body>
<div class="light">元素完全透明</div>
<div class="medium">元素半透明</div>
<div class="heavy">元素完全不透明</div>
<div class="father">
    <div class="son">元素跟随父元素继承 opacity 属性的值</div>
</div>


</body>
</html>
